<template>
  <t-popup
    expand-animation
    placement="bottom-right"
    trigger="click"
    :visible="isNoticeVisible"
    @visible-change="onPopupVisibleChange"
  >
    <template #content>
      <div class="header-msg">
        <div class="header-msg-top">
          <p>系统消息</p>
                    <t-button v-if="data.length > 0" class="clear-btn" variant="text" theme="primary" @click="setRead('all')"
                      >全部已读</t-button
                    >
        </div>
        <t-list v-if="data.length > 0" :async-loading="asyncLoading" @load-more="loadMore" class="narrow-scrollbar"
                :split="true">
          <t-list-item v-for="(item, index) in data" :key="index">
            <div>
              <p class="msg-title">{{ item.title }}</p>
              <p class="msg-content">{{ item.content }}</p>
              <p class="msg-type">
                <t-tag theme="primary" variant="light"> {{ item.serviceName }}</t-tag>
              </p>
            </div>
            <p class="msg-time">{{ item.createTime }}</p>
            <template #action>
              <t-button size="small" variant="outline" @click="setRead(item.id)"> 设为已读</t-button>
            </template>
          </t-list-item>
        </t-list>

        <div v-else class="empty-list">
          <p>暂无通知</p>
        </div>
        <div class="header-msg-bottom">
          <t-button
            v-if="data.length > 0"
            class="header-msg-bottom-link"
            variant="text"
            theme="primary"
            @click="goDetail"
          >查看全部
          </t-button
          >
        </div>
      </div>
    </template>
    <t-badge :count="unReadTotal" :offset="[12, 8]">
      <t-button style="color: #fff;" theme="default" shape="square" variant="text" @click="isNoticeVisible = true">
        <t-icon name="mail"></t-icon>
      </t-button>
    </t-badge>
  </t-popup>
</template>

<script>
import Vue from 'vue';

export default Vue.extend({
  components: {},
  data() {
    return {
      isNoticeVisible: false,
      data: [],
      unReadTotal: 0,
      asyncLoading: 'load-more',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        isRead: '0'
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 点击加载更多，状态切换为「加载中」
    loadMore() {
      this.asyncLoading = 'loading';
      this.queryParams.pageNum += 1
      this.$api.system.message.list(this.queryParams).then(response => {
        if (response.rows.length < this.queryParams.pageSize) {
          // 最后一页
          this.asyncLoading = '';
        }else {
          this.asyncLoading = 'load-more';
        }
        this.data=this.data.concat(response.rows);
        this.unReadTotal = response.total;
      }).catch((e) => {
        this.asyncLoading = 'load-more';
        this.$message.error(e.toString());
      });
    },
    getList() {
      // this.dataLoading = true;
      // this.queryParams.pageNum = this.pagination.current || 1;
      this.$api.system.message.list(this.queryParams).then(response => {
        if (response.rows.length < this.queryParams.pageSize) {
          this.asyncLoading = '';
        }
        this.data = response.rows;
        this.unReadTotal = response.total;
      }).catch((e) => {
        // this.dataLoading = false;
        this.$message.error(e.toString());
      });
    },
    onPopupVisibleChange(visible, context) {
      if (context.trigger === 'trigger-element-click') {
        this.isNoticeVisible = true;
        return;
      }
      this.isNoticeVisible = visible;
    },
    goDetail() {
      this.$router.push('/home/tzgg/xxtz-index');
      this.isNoticeVisible = false;
    },
    setRead(id) {
      if (id === "all"){
        this.$api.system.message.setReadAll().then(response => {
          this.data = [];
          this.unReadTotal = 0;
        }).catch((e) => {
          this.$message.error(e.toString());
        });
      }else {
        this.$api.system.message.setRead(id).then(response => {
          const index = this.data.findIndex((val) => val.id === id)
          if (index !== -1) {
            this.data.splice(index, 1)
            this.unReadTotal -= 1;
          }
        }).catch((e) => {
          this.$message.error(e.toString());
        });
      }
    },
  },
});
</script>

<style lang="less" scoped>
@import '@/style/variables.less';

.header-msg {
  width: 400px;
  height: 500px;

  .empty-list {
    height: calc(100% - 104px);
    text-align: center;
    padding-top: 135px;
    font-size: 14px;
    color: @text-color-secondary;

    img {
      width: 63px;
    }

    p {
      margin-top: 30px;
    }
  }

  &-top {
    position: relative;
    height: 56px;
    font-size: 16px;
    color: @text-color-primary;
    text-align: center;
    line-height: 56px;
    border-bottom: 1px solid @component-border;

    .clear-btn {
      position: absolute;
      top: 12px;
      right: 24px;
    }
  }

  &-bottom {
    height: 48px;
    align-items: center;
    display: flex;
    justify-content: center;

    &-link {
      text-decoration: none;
      font-size: 14px;
      color: @brand-color;
      line-height: 48px;
      cursor: pointer;
    }
  }

  .t-list {
    height: calc(100% - 104px);
  }

  .t-list-item {
    overflow: hidden;
    width: 100%;
    padding: 16px 24px;
    border-radius: @border-radius;
    font-size: 14px;
    color: @text-color-primary;
    line-height: 22px;
    cursor: pointer;

    &:hover {
      transition: background 0.2s ease;
      background: @bg-color-container-hover;

      .msg-content {
        color: @brand-color-8;
      }

      .t-list-item__action {
        button {
          bottom: 16px;
          opacity: 1;
        }
      }

      .msg-time {
        bottom: -6px;
        opacity: 0;
      }
    }

    .msg-content {
      margin-bottom: 16px;
    }

    .msg-title {
      margin-bottom: 10px;
      font-weight: bold;
    }

    .msg-type {
      color: @text-color-secondary;
    }

    .t-list-item__action {
      button {
        opacity: 0;
        position: absolute;
        right: 24px;
        bottom: -6px;
      }
    }

    .msg-time {
      transition: all 0.2s ease;
      opacity: 1;
      position: absolute;
      right: 24px;
      bottom: 16px;
      color: @text-color-secondary;
    }
  }
}
</style>
